<template>
  <view class="wrap">
    <swiper class="swiper" :indicator-dots="indicatorDots" circular="true" indicator-color="rgba(0,0,0,.3)"
            indicator-active-color="rgba(255,255,255,.3)">
      <swiper-item v-for="(item,idx) in imgs" :key="idx">
        <div class="swiper-item" :style="{backgroundImage:'url('+item+')'}"></div>
      </swiper-item>
    </swiper>
    <div class="top  ">
      <div class="info">
        <div class="title">{{goods.goods_title}}</div>
        <div class="line10 color555">所需积分<span class="price ">{{goods.points_num}}</span></div>
        <div class="graytext2 font14 line6">价值{{goods.market_price}}元,共{{goods.package_sale}}人兑换</div>
        <div class="tags" v-if="goods.limit>0">
          <span class="tag" >每次限领{{goods.limit}}件</span>
        </div>
      </div>
      <!--<div class="isCollect" @click="taggleFavorite">-->
      <!--<fun-icons :color="goods.isFavorite?'#81ce69':'#ccc'" class="icon" name="iconxihuan" size="26"></fun-icons>-->
      <!--</div>-->
    </div>
    <div style="height: 10px;background: #f8f8f8"></div>

    <!--  规格-->
    <!--<view class="specs font14 bgwhite padding15 line10">-->
    <!--<view v-for="(item,idx1) in specs" class="spec-box">-->
    <!--<view class="spec-title font16 line10">{{item.name}}</view>-->
    <!--<view class="rows flex">-->
    <!--&lt;!&ndash;{{spec.id == select_info_type_id ?'active':''}}&ndash;&gt;-->
    <!--<view v-for="(spec,idx2) in item.list" @tap="checkSpecItem(idx1,idx2)" class="spec-item" :class="[spec.check ?'check':'']">{{spec.name}}</view>-->
    <!--</view>-->

    <!--</view>-->
    <!--</view>-->

    <div class="container">
      <u-parse :html="goods.content"></u-parse>
    </div>

    <!--<div class="container" v-show="activeTabIndex==1">-->
    <!--<div class="control">-->
    <!--<div class="graytext2 font14">已经更新{{goods.item_count}}节音频</div>-->
    <!--<div class="icons">-->
    <!--<fun-icons color="#999" class="icon down" name="iconxiazai" size="22" ></fun-icons>-->
    <!--<fun-icons @click="sort='desc'" v-if="sort==='asc'" color="#999" class="icon" name="iconpaixu-sheng" size="22" ></fun-icons>-->
    <!--<fun-icons @click="sort='asc'" v-if="sort==='desc'" color="#999" class="icon" name="iconpaixu-jiang" size="22" ></fun-icons>-->
    <!--</div>-->

    <!--</div>-->
    <!--<div class="hr"></div>-->
    <!--<div class="course-item-list">-->

    <!--</div>-->

    <!--</div>-->

    <div class="action">
      <u-button class="btn" @click="goBuy" type="primary">立即兑换</u-button>

    </div>

    <div class="space" style="height:50px"></div>
    <div class="safearea"></div>

  </view>
</template>

<script>

import { pageMixin } from '@/mixins'
import { points, unifyOrder, unifyPay } from '@/api'
import { buildSharePath, emptyObject, isCheckMobile } from '@/common/helper'
import { toast, error } from '@/common/fun'
import Storage from '@/common/Storage'
import UParse from '@/uview-ui/components/u-parse/u-parse'
import UButton from '@/uview-ui/components/u-button/u-button'
export default {
  mixins: [pageMixin],
  components:{
    UButton,
    UParse},
  data () {
    return {
      sort: 'asc',
      activeTabIndex: 0,
      indicatorDots: true,
      id: null,
      imgs: [],
      tags: [],
      name: '',
      phone: '',
      num: 1,
      specs: [],
      skus: [],
      goods: {}
    }
  },
  onShow () {

  },

  methods: {
    goBuy () {
      // let specs = this.specs, i = 0
      // specs.map(function(row) {
      //     row.list.map(function(col) {
      //         col.check && i++
      //     })
      // })
      //
      // //规格必选
      // if (i < specs.length) {
      //     error('所有规格必选')
      //     return
      // }
      //
      // let select_sku = this.isCheckSku(specs,this.skus) //获取选中的那个goods_list
      //
      //
      // let goods = {}
      //
      // goods.id = this.goods.id
      // goods.title = this.goods.title
      // goods.logo = this.goods.logo
      //
      // console.log(select_sku)
      // goods.sku = select_sku
      // goods.sku.num = 1 //数量

      Storage.set('temp_points_info', this.goods)

      uni.navigateTo({
        url: '/pages/points/booking'
      })
    },
    minus () {
      if (this.num > 1) {
        this.num--
      } else {
        toast('最低1人参加', 'none')
      }
    },
    plus () {
      if (this.num >= (this.goods.num - this.goods.join_num)) {
        toast('已经达到活动最大限制', 'none')
        return
      }

      this.num++
    },
    bindNum (e) {
      this.num = e.detail.value
    },
    openJoin () {
      this.$refs.refPhone.show()
    },
    async joinActivity () {
      const _self = this

      const postData = {
        type: 'goods',
        activity_id: this.goods.id,
        name: this.name,
        phone: this.phone,
        total_money: this.goods.price * this.num,
        activity_num: this.num
      }

      // 如果有值为false则不提交
      if (!emptyObject(postData, 1)) return

      if (!isCheckMobile(postData.phone)) {
        error('手机号格式不正确')
        return
      }

      this.$refs.refPhone.close()

      let order_no = null

      await unifyOrder(postData).then(res => {
        order_no = res.data
      }, err => {
      }).catch(error => {

      })

      if (!order_no) return
      unifyPay({
        order_no: order_no,
        channel: 'wx_mini',
        body: '测试购买啊'
      }).then(res => {
        const payConf = JSON.parse(res.data)
        // 仅作为示例，非真实参数信息。
        uni.requestPayment({
          provider: 'wxpay',
          ...payConf,
          success: function (res) {
            console.log('success:' + JSON.stringify(res))

            toast('购买成功')
            uni.navigateTo({
              url: '/pages/user/index'
            })
          },
          fail: function (err) {
            // error('购买失败')
            console.log('fail:' + JSON.stringify(err))
          }
        })
      }).catch(error => {
      })
    }
  },
  watch: {},
  onShareAppMessage () {
    const goods = this.goods
    const path = '/pages/shop/detail?id=' + goods.id
    const shareObj = {
      title: goods.title,
      desc: goods.desc || '分享一个好故事给你',
      imageUrl: goods.logo,
      path: buildSharePath(path)
    }
    console.log(shareObj)
    return shareObj
  },
  filters: {},
  onLoad (options) {
    this.id = options.id

    points({ id: this.id }, {
      mask: true,
      tip: 'loading'
    }).then(res => {
      this.goods = res.data
      uni.setNavigationBarTitle({
        title: res.data.goods_title
      })

      if (res.data.goods_image) {
        this.imgs = res.data.goods_image.split('|')
      } else {
        this.imgs = [res.data.goods_logo]
      }

      // if(res.data.tags){
      //     this.tags = res.data.tags.split(/;|:|,|，| |\r|\n|\|/);
      // }

      // let specs = JSON.parse(res.data.specs)
      // specs.map(function(row) {
      //     row.list.map(function(col) {
      //         col.check = false
      //     })
      // })
      //
      // this.specs = specs
      // this.skus = res.data.store_goods_list
    })
  },
  created () {

  }
}
</script>

<style scoped lang="scss">
  .wrap {
    min-height: 100vh;
    background: white;
  }

  .swiper {
    height: 350rpx;

    .swiper-item {
      height: 100%;
      @include cover-img(cover, 0, #fff);
    }
  }

  .top {
    display: flex;
    background: white;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 10px 15px;

    .title {
      font-size: 18px;
      padding: 5px 0 10px 0;
    }

    .tags {
      .tag {
        background: #f2f2f2;
        color: #999;
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        margin-right: 4px;
        border-radius: 8px;
        padding: 2px 4px;
      }
    }
  }

  .action {
    position: fixed;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    z-index: 2;
    width: 750rpx;

    .btn {
      border-radius: 0;

    }
  }

  .spec-box {
    margin-top: 15px;

    &:first-child {
      margin-top: 0;
    }

    .spec-title {
      color: #444444;
    }

    .rows {
      flex-wrap: wrap;

      .spec-item {
        margin-right: 15px;
        margin-bottom: 10px;
        border: 1px solid #e7e7e7;
        color: #666666;
        padding: 4px 12px;
        border-radius: 2px;

        &.check {
          background: $fun-primary-color;
          color: white;
          border: 1px solid $fun-primary-color;
        }
      }
    }
  }
</style>
